﻿<!DOCTYPE html>
<html style="height: 100%; overflow: hidden; ">
<head>
    <meta charset="utf-8" />
    <title>Html客户端</title>
    <!--必要-->
    <link href="../Element/element.css" rel="stylesheet" />
    <script src="../Static/jquery.min.js"></script>
    <script src="../Static/vue.js"></script>
    <script src="../Element/element.js"></script>
    <script src="../Static/WebsocketHelper.js"></script>
</head>
<body style="height:100%">
    <script>
        let app
    </script>
    <div id="app" style="height: 100% " v-cloak>
        <el-row>
            <el-button type="primary" size="mini" @click="InvokeMessage('ReadWeight')" plain>开始读取重量</el-button>
            <el-button type="primary" size="mini" @click="Load(1)" plain>初始化屏幕(带数据)</el-button>
            <el-button type="primary" size="mini" @click="Load(0)" plain>初始化屏幕</el-button>
            <el-button type="primary" size="mini" @click="InvokeMessage('ZeroCalibration')" plain>重置重量</el-button>
            <el-button type="primary" size="mini" @click="InvokeMessage('LoadWeight')" plain>将当前重量作为单重</el-button>
        </el-row>
        <el-row>
            <el-table :data="DataTable"
                      style="width: 100%"
                      height="250">
                <el-table-column fixed
                                 prop="Address"
                                 label="屏幕地址"
                                 width="150">
                </el-table-column>
                <el-table-column prop="AddressWeight"
                                 label="传感器地址">
                </el-table-column>
                <el-table-column prop="Carry"
                                 label="重量进位">
                </el-table-column>
                <el-table-column prop="Name"
                                 label="名称">
                    <template slot-scope="props">
                        <el-input v-model="props.row.Name" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="Norms"
                                 label="规格">
                    <template slot-scope="props">
                        <el-input v-model="props.row.Norms" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="Code"
                                 label="编码">
                    <template slot-scope="props">
                        <el-input v-model="props.row.Code" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="SumNumber"
                                 label="数量">
                </el-table-column>
                <el-table-column prop="SumWeight"
                                 label="重量">
                </el-table-column>
                <el-table-column prop="Weight"
                                 label="单重">
                </el-table-column>
                <el-table-column prop="Unit"
                                 label="单位">
                    <template slot-scope="props">
                        <el-input v-model="props.row.Unit" placeholder="请输入内容"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right"
                                 label="操作"
                                 width="100">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="Update(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>

    <script type="module">
        app = new Vue({
            el: "#app",
            data() {
                return {
                    DataTable: []
                }
            },
            async created() {
                SocketStart("ws://127.0.0.1:9999", data => this.MessageEvent(JSON.parse(data)), this.OpenEvent, () => this.RError("服务端链接断开"))
            },
            methods: {
                MessageEvent(data) {
                    if (data.ActionName) {
                        
                        switch (data.ActionName) {
                            case "GetDataList":
                                this.DataTable = data.Data
                                break;
                            default: return;
                        }
                    }
                    switch (data.Status) {
                        case 10: this.SetData(data.Data, 0)
                        case 20: this.SetData(data.Data, 1)
                        case 1000: //this.RSuccess(data.Message)
                            break
                        default:
                            this.RError(data.Message)
                            break;
                    }
                },
                /**
                 *  设置数据
                 *  @param {object} data 服务端回传的数据
                 *  @param {int} type 0只改重量相关参数
                 */
                SetData(data, type = 0) {
                    var model = this.DataTable.find(t => t.Address == data.Address)
                    if (!model) {
                        this.DataTable.push(data)
                    }
                    else {
                        model.SumNumber = data.SumNumber
                        model.SumWeight = data.SumWeight
                        model.Weight = data.Weight
                        model.Name = data.Name
                        model.Norms = data.Norms
                        model.Code = data.Code
                        model.Unit = data.Unit
                    }
                    //console.log(data,type)
                },
                /**
                 *  调用服务端的方法
                 *  @param {string} ActionName 方法名
                 */
                InvokeMessage(ActionName) {
                    SocketSend("ScreenAndWeight/" + ActionName)
                },
                /**
                 *  修改屏幕信息
                 *  @param {mdoel} model 修改的行
                 */
                Update(model) {
                    SocketSend("ScreenAndWeight/Update?JsonData=" + JSON.stringify(model))
                },
                /**
                 *  初始化屏幕
                 *  @param {int} type 0 只做基础初始化屏幕，1带数据的初始化屏幕
                 */
                Load(type) {
                    SocketSend("ScreenAndWeight/Load?type=" + type)
                },
                /**链接到服务端的操作 */
                OpenEvent() {
                    this.RSuccess("服务端链接成功")
                    this.InvokeMessage("GetDataList");
                },
                /**弹出成功消息 */
                RSuccess(message) {
                    this.$message({
                        message: message,
                        type: 'success'
                    })
                },
                /**弹出错误功消息 */
                RError(message) {
                    this.$message({
                        message: message,
                        type: 'error'
                    })
                }
            }
        });
    </script>
</body>
</html>